{extend name='common/common' /}

{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <!-- Panel Other -->
    <div class="ibox float-e-margins col-sm-5">
        <div class="ibox-title">
            <h5>产品属性信息</h5>
        </div>
        <div class="ibox-content">
            <div class="form-group">
                {if authCheck('product/addattr')}
                    <button class="btn btn-outline btn-primary" id="addAttr" type="button">添加顶级属性分类</button>
                {/if}
                <button class="btn btn-outline btn-success" type="button" onclick="window.location.reload();">刷新</button>
            </div>
            <div class="ibox-content">
                <ul id="tree"></ul>
            </div>
        </div>
    </div>
</div>


<!-- 添加属性 -->
<div class="ibox-content" id="node_box" style="display: none">
    <form class="form-horizontal m-t addForm" method="post" action="{:url('product/addAttr')}">
        <input type="hidden" class="form-control" value="0" name="pid" id="pid">
        <div class="form-group">
            <label class="col-sm-3 control-label">属性名称：</label>
            <div class="input-group col-sm-7">
                <input id="Attr_name" type="text" class="form-control" name="name" required="" aria-required="true">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">所属分类：</label>
            <div class="input-group col-sm-7">
                <input id="show_pid" type="text" class="form-control" value="顶级分类" disabled>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-4 col-sm-offset-8">
                <button class="btn btn-primary" type="submit">提交</button>
            </div>
        </div>
    </form>
</div>
<!-- 添加属性 -->

<!-- 添加分期属性 -->
<div class="ibox-content" id="node_box_3" style="display: none">
    <form class="form-horizontal m-t addForm" method="post" action="{:url('product/addAttr')}">
        <input type="hidden" class="form-control" value="0" name="pid" id="pid_3">
        <div class="form-group">
            <label class="col-sm-3 control-label">属性名称：</label>
            <div class="input-group col-sm-7">
                <input id="Attr_name_3" type="text" class="form-control" name="name" required="" aria-required="true">
            </div>
        </div>

		<div class="form-group">
            <label class="col-sm-3 control-label">分期期数：</label>
            <div class="input-group col-sm-7">
                <input id="Attr_values" type="text" class="form-control" name="values" required="" aria-required="true">
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-4 col-sm-offset-8">
                <button class="btn btn-primary" type="submit">提交</button>
            </div>
        </div>
    </form>
</div>
<!-- 添加分期属性 -->

<!-- 添加属性 -->
<div class="ibox-content" id="top_node_box" style="display: none">
    <form class="form-horizontal m-t addForm" method="post" action="{:url('product/addAttr')}">
        <div class="form-group">
            <label class="col-sm-3 control-label">名称：</label>
            <div class="input-group col-sm-7">
                <input type="hidden" value="0"  name="pid">
                <input id="Attr_name" type="text" class="form-control" name="name" required="" aria-required="true">
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-4 col-sm-offset-8">
                <button class="btn btn-primary" type="submit">提交</button>
            </div>
        </div>
    </form>
</div>
<!-- 添加属性 -->

<!-- 编辑属性 -->
<div class="ibox-content" id="edit_box" style="display: none">
    <form class="form-horizontal m-t editForm" method="post" action="{:url('product/editAttr')}">
        <input type="hidden" name="id" id="id"/>
        <div class="form-group">
            <label class="col-sm-3 control-label">分类名称：</label>
            <div class="input-group col-sm-7">
                <input id="e_Attr_name" type="text" class="form-control" name="name" required="" aria-required="true">
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-4 col-sm-offset-8">
                <button class="btn btn-primary" type="submit">提交</button>
            </div>
        </div>
    </form>
</div>
<!-- 添加属性 -->

<!-- 编辑分期属性 -->
<div class="ibox-content" id="edit_box_3" style="display: none">
    <form class="form-horizontal m-t editForm" method="post" action="{:url('product/editAttr')}">
        <input type="hidden" name="id" id="id"/>
        <div class="form-group">
            <label class="col-sm-3 control-label">属性名称：</label>
            <div class="input-group col-sm-7">
                <input id="e_Attr_name" type="text" class="form-control" name="name" required="" aria-required="true">
            </div>
        </div>

		<div class="form-group">
            <label class="col-sm-3 control-label">分期期数：</label>
            <div class="input-group col-sm-7">
                <input id="e_Attr_values" type="text" class="form-control" name="values" required="" aria-required="true">
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-4 col-sm-offset-8">
                <button class="btn btn-primary" type="submit">提交</button>
            </div>
        </div>
    </form>
</div>
<!-- 添加分期属性 -->


<!-- 固定分类操作询问层 -->
<div class="ibox-content" id="ask_box" style="display: none">
    <div class="form-horizontal m-t">
        <div class="form-group" style="text-align: center">
            {if authCheck('product/addattr')}
            <button class="btn btn-outline btn-success addAttr" type="button">
                <i class="fa fa-plus"></i>
                添加该类属性
            </button>
            {/if}
        </div>
    </div>
</div>
<!-- 固定分类操作询问层 -->

<!-- 分期分类操作询问层 -->
<div class="ibox-content" id="ask_box_3" style="display: none">
    <div class="form-horizontal m-t">
        <div class="form-group" style="text-align: center">
            {if authCheck('product/addattr')}
            <button class="btn btn-outline btn-success addAttr_3" type="button">
                <i class="fa fa-plus"></i>
                添加该类属性
            </button>
            {/if}
        </div>
    </div>
</div>
<!-- 分期分类操作询问层 -->

<!-- 固定分类操作询问层 -->
<div class="ibox-content" id="task_box" style="display: none">
    <div class="form-horizontal m-t">
        <div class="form-group" style="text-align: center">
            {if authCheck('product/addattr')}
            <button class="btn btn-outline btn-success addAttr" type="button">
                <i class="fa fa-plus"></i>
                添加属性
            </button>
            {/if}
            {if authCheck('product/editattr')}
            <button class="btn btn-outline btn-primary editAttr" type="button">
                <i class="fa fa-edit"></i>
                编辑该分类
            </button>
            {/if}
            {if authCheck('product/delattr')}
            <button class="btn btn-outline btn-danger delAttr" type="button">
                <i class="fa fa-trash-o"></i>
                删除该分类
            </button>
            {/if}
        </div>
    </div>
</div>
<!-- 固定分类操作询问层 -->


<!-- 属性操作询问层 -->
<div class="ibox-content" id="sask_box" style="display: none">
    <div class="form-horizontal m-t">
        <div class="form-group" style="text-align: center">
            {if authCheck('product/editattr')}
            <button class="btn btn-outline btn-primary editAttr" type="button">
                <i class="fa fa-edit"></i>
                编辑属性
            </button>
            {/if}
            {if authCheck('product/delattr')}
            <button class="btn btn-outline btn-danger delAttr" type="button">
                <i class="fa fa-trash-o"></i>
                删除属性
            </button>
            {/if}
        </div>
    </div>
</div>
<!-- 属性操作询问层 -->

<!-- 分期属性操作询问层 -->
<div class="ibox-content" id="sask_box_3" style="display: none">
    <div class="form-horizontal m-t">
        <div class="form-group" style="text-align: center">
            {if authCheck('product/editattr')}
            <button class="btn btn-outline btn-primary editAttr_3" type="button">
                <i class="fa fa-edit"></i>
                编辑属性
            </button>
            {/if}
            {if authCheck('product/delattr')}
            <button class="btn btn-outline btn-danger delAttr" type="button">
                <i class="fa fa-trash-o"></i>
                删除属性
            </button>
            {/if}
        </div>
    </div>
</div>
<!-- 分期属性操作询问层 -->
{/block}


{block name="script"}

<script type="text/javascript">
var Attr_del_url = "{:url('product/delAttr')}";
var box;
var nowNode = null;

$(function(){

    getTree();

    $(".addAttr").click(function(){
        layer.close(box);
        $('#show_pid').val(nowNode.name);
        $('#pid').val(nowNode.id);

        layui.use('layer', function(){
            box = layer.open({
                type: 1,
                title: '添加 ' + nowNode.name + ' 的子菜单',
                anim: 2,
                skin: 'layui-layer-molv', //加上边框
                area: ['450px', '240px'], //宽高
                content: $('#node_box')
            });
        });
    });

	$(".addAttr_3").click(function(){
        layer.close(box);
        $('#pid_3').val(nowNode.id);
		console.log(nowNode)
        layui.use('layer', function(){
            box = layer.open({
                type: 1,
                title: '添加 ' + nowNode.name + ' 的子菜单',
                anim: 2,
                skin: 'layui-layer-molv', //加上边框
                area: ['450px', '340px'], //宽高
                content: $('#node_box_3')
            });
        });
    });

    $("#addAttr").click(function(){
        layui.use('layer', function(){
            box = layer.open({
                type: 1,
                title: '添加顶级属性分类',
                anim: 2,
                skin: 'layui-layer-molv', //加上边框
                area: ['450px', '240px'], //宽高
                content: $('#top_node_box')
            });
        });
    });

    $(".editAttr").click(function(){
        layer.close(box);
        $("#id").val(nowNode.id);
        $("#e_Attr_name").val(nowNode.name);

        layui.use('layer', function(){
            box = layer.open({
                type: 1,
                title: '编辑  ' + nowNode.name,
                anim: 2,
                skin: 'layui-layer-molv', //加上边框
                area: ['450px', '240px'], //宽高
                content: $('#edit_box')
            });
        });
    });

	$(".editAttr_3").click(function(){
        layer.close(box);
        $("#id").val(nowNode.id);
        $("#e_Attr_name").val(nowNode.name);
		$("#e_Attr_values").val(nowNode.values);

        layui.use('layer', function(){
            box = layer.open({
                type: 1,
                title: '编辑  ' + nowNode.name + '  属性',
                anim: 2,
                skin: 'layui-layer-molv', //加上边框
                area: ['450px', '340px'], //宽高
                content: $('#edit_box_3')
            });
        });
    });

    $(".delAttr").click(function(){
        layer.close(box);
        if(nowNode.children.length > 0){
            layer.alert('该分类下有子分类，不可删除', {icon:2, title:'失败提示', closeBtn:0, anim:6});
            return false;
        }

        //询问框
        var index = layer.confirm('确定要删除' + nowNode.name + '？', {
            icon: 3,
            title: '友情提示',
            btn: ['确定','取消'] //按钮
        }, function(){

            $.getJSON(Attr_del_url, {id : nowNode.id},function(res){
                layer.close( index );
                if( 1 == res.code ){
                    $("#tree").empty();
                    getTree();
                }else if(111 == res.code){
                    window.location.reload();
                }else{
                    layer.alert(res.msg, {icon:2});
                }
            });
        }, function(){

        });
    });


    // 添加分类
    var options = {
        beforeSubmit:showStart,
        success:showSuccess
    };

    $('.addForm').submit(function(){
        $(this).ajaxSubmit(options);
        return false;
    });

    // 编辑分类
    $('.editForm').submit(function(){
        $(this).ajaxSubmit(options);
        return false;
    });
});

function getTree(){
    layui.use(['tree', 'layer'], function(){
        var layer = layui.layer;

        $.getJSON("{:url('product/attr')}", function(res){
            if(111 == res.code){
                window.location.reload();
            }
            layui.tree({
                elem: '#tree'
                ,nodes: res.data
                ,click: function(node){
                    if(node.id <= 4 && node.id != 3){
                        layui.use('layer', function(){
                            box = layer.open({
                                type: 1,
                                title: '您要如何操作该类属性',
                                anim: 2,
                                skin: 'layui-layer-molv', //加上边框
                                area: ['400px', '150px'], //宽高
                                content: $('#ask_box')
                            });
                        });
                    }
					if(node.id == 3){
						layui.use('layer', function(){
                            box = layer.open({
                                type: 1,
                                title: '您要如何操作该类属性',
                                anim: 2,
                                skin: 'layui-layer-molv', //加上边框
                                area: ['400px', '150px'], //宽高
                                content: $('#ask_box_3')
                            });
                        });
					}
                    if(node.pid != 0 && node.pid !=3){
                        layui.use('layer', function(){
                            box = layer.open({
                                type: 1,
                                title: '您要如何操作该类属性',
                                anim: 2,
                                skin: 'layui-layer-molv', //加上边框
                                area: ['400px', '150px'], //宽高
                                content: $('#sask_box')
                            });
                        });
                    }
					if(node.pid != 0 && node.pid ==3){
                        layui.use('layer', function(){
                            box = layer.open({
                                type: 1,
                                title: '您要如何操作该类属性',
                                anim: 2,
                                skin: 'layui-layer-molv', //加上边框
                                area: ['400px', '150px'], //宽高
                                content: $('#sask_box_3')
                            });
                        });
                    }
                    if(node.id > 4 && node.pid==0){
                        layui.use('layer', function(){
                            box = layer.open({
                                type: 1,
                                title: '您要如何操作该类属性',
                                anim: 2,
                                skin: 'layui-layer-molv', //加上边框
                                area: ['400px', '150px'], //宽高
                                content: $('#task_box')
                            });
                        });
                    }
                    nowNode = node;
                }
            });
        });
    });
}

// 添加相关的 js
var index = '';
function showStart(){
    index = layer.load(0, {shade: false});
    return true;
}

function showSuccess(res){
    layui.use('layer', function(){
        var layer = layui.layer;

        layer.ready(function(){
            layer.close( index );
            layer.close( box );
            if( 1 == res.code ){
                $("#Attr_name").val('');
                $("#tree").empty();
                getTree();
            }else if(111 == res.code){
                window.location.reload();
            }else{
                layer.alert(res.msg, {icon:2});
            }
        });
    });
}

</script>
{/block}
